import { LogMouse } from './RenderProps/LogMouse';
/*
  学习目标：RenderProps
  类似: vue中作用域插槽
  步骤：
     1. 封装一个组件, 组件内封装逻辑
     2. 接受一个名为render函数, 
     3. render函数负责渲染具体的内容
*/

export default function App() {
  return (
    <div>
      App
      <hr />
      <LogMouse
        render={({ mouse, handleMouseMove }) => {
          // 3. 自定义如何渲染
          return <Header mouse={mouse} handleMouseMove={handleMouseMove} />;
        }}
      />
    </div>
  );
}

function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        {mouse.x} - {mouse.y}
      </h1>
    </div>
  );
}
